<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  <h2>基本信息</h2>
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="ruleForm.name" maxlength="10"/>
    </el-form-item>
    <el-form-item label="商品图片" prop="region">
     <el-upload
    class="avatar-uploader"
    action="https://localhost:44392/PostImag"
    :show-file-list="true"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :on-exceed="handleExceed"
  >
    <img v-if="ruleForm.productImages" :src="ruleForm.productImages" class="avatar" style="width: 80px;height: 80px"/>
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
  <span>建议尺寸：750*750像素（比例2：1），你可以拖曳图片调整顺序。最多支持上传10张</span>
      <span>若商品显示模式为正方形时，建议第一张图片为：375*375（比例1：1）</span>
    </el-form-item>

    <el-form-item label="商品标签" required prop="productLabels">
      <el-select v-model="ruleForm.productLabels" placeholder="请选择" style="width: 240px">
    <el-option value="测试1">测试1</el-option>
    <el-option value="测试2">测试2</el-option>
    <el-option value="测试3">测试3</el-option>
  </el-select>
  <el-button


      type="primary"
      link
    >
      新增
    </el-button>
    <el-button

      type="primary"
      link
    >
      查看示例
    </el-button>
    </el-form-item>
    <el-form-item label="商品简介" prop="productDescription">
      <el-input
    v-model="ruleForm.productDescription"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="请输入商品简介"
    maxlength="30"
  />
    </el-form-item>
    <el-form-item label="商品详情" prop="ProductDetails">
         <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"

      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="ruleForm.productDetails"
        :defaultConfig="editorConfig"

        @onCreated="handleCreated"
      />
    </div>

    </el-form-item>
    <el-form-item label="分类设置">
      <el-select v-model="ruleForm.categoricalSettings" placeholder="请选择分类" style="width: 240px">
        <el-option
          label="毛巾"
          value="毛巾"
        />
        <el-option
          label="鞋"
          value="鞋"
        />
      </el-select>
    </el-form-item>
    <h2>价格库存</h2>
    <el-form-item label="销售价" prop="salesPrice">
      <el-input
        v-model="ruleForm.salesPrice"
        style="width: 240px"
        placeholder="Please input"
        :formatter="(value:any) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
        :parser="(value:any) => value.replace(/¥\s?|(,*)/g, '')"
      />
    </el-form-item>
    <el-form-item label="原价">
      <el-input
        v-model="ruleForm.price"
        style="width: 240px"
        placeholder="Please input"
        :formatter="(value:any) => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
        :parser="(value:any) => value.replace(/¥\s?|(,*)/g, '')"
      />
    </el-form-item>
     <el-form-item label="剩余库存">
      <el-input
      v-model="ruleForm.remaining"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #append>份</template>
    </el-input>

    </el-form-item>
     <el-form-item label="实际销量">
      <el-input
      v-model="ruleForm.actual"
      style="max-width: 600px"
      placeholder="Please input"
    >
      <template #append>份</template>
    </el-input>

    </el-form-item>
     <el-form-item label="可用抵扣">
      <el-checkbox-group v-model="ruleForm.deductionss">
    <el-checkbox label="积分" value="积分" />
    <el-checkbox label="余额" value="余额" />
  </el-checkbox-group>
    </el-form-item>
     <el-form-item label="可用优惠">
      <el-checkbox-group v-model="ruleForm.availables">
    <el-checkbox label="会员折扣" value="会员折扣" />
    <el-checkbox label="优惠券" value="优惠券" />
  </el-checkbox-group>
    </el-form-item>
    <h2>购买须知</h2>
     <el-form-item label="是否限购">
      <el-input
      v-model="ruleForm.purchase"
      style="max-width: 600px"
    >
      <template #append>人</template>
    </el-input>
    </el-form-item>
     <el-form-item label="赠送好友">
      <el-checkbox-group v-model="ruleForm.gift">
    <el-checkbox label="用户购买产品后可转增其他好友" value="true" />
  </el-checkbox-group>
  <span>转增后的商品无法退款</span>
    </el-form-item>
     <el-form-item label="其他须知">
      <el-input
    v-model="ruleForm.other"
    style="width: 240px"
    :rows="2"
    type="textarea"
    placeholder="输入内容不得超过1000字"
    maxlength="1000"
  />
    </el-form-item>
    <h2>使用须知</h2>
     <el-form-item label="使用期限" prop="desc">
       <div  class="mb-2 ml-4">
        <el-radio-group v-model="ruleForm.expirationDate">
          <el-radio value="无限制" size="large">无限制</el-radio>
        </el-radio-group>
        
  </div>
  &emsp;
  <div  class="mb-2 ml-4">
     <el-radio-group  v-model="ruleForm.expirationDate">
         <el-radio value="固定日期" size="large">固定日期</el-radio>
  
      <el-date-picker

      style="width: 220px"
      type="datetimerange"

      range-separator="-"
      start-placeholder="startDate"
      end-placeholder="endDate"
      :disabled="ruleForm.expirationDate!='固定日期'"
    />
        </el-radio-group>
   
  </div>
  <div  class="mb-2 ml-4">
    <el-radio value="购买后" size="large" v-model="ruleForm.expirationDate">购买后</el-radio>
    &nbsp;
    <el-input
      v-model="ruleForm.status"
      style="max-width: 200px"
      :disabled="ruleForm.expirationDate!='购买后'"
    >
      <template #append>天</template></el-input>有效期
  </div>
      
    </el-form-item>
     <el-form-item label="可用日期" prop="desc">
      <el-input
    v-model="ruleForm.availableDates"
    maxlength="300"
    style="width: 240px"
    placeholder="Please input"
    show-word-limit
    type="textarea"
  />
    </el-form-item>
     <el-form-item label="可用时间" prop="desc">
      <el-input

    maxlength="300"
    style="width: 240px"
    placeholder="Please input"
    show-word-limit
    type="textarea"
  />
    </el-form-item>
     <el-form-item label="是否预约" prop="desc">
      <el-radio-group v-model="ruleForm.booking">
      <el-radio :value="true" size="large">无需预约</el-radio>
      <el-radio :value="false" size="large">需要预约</el-radio>
      <span>预约仅支持到店自提模式</span>
    </el-radio-group>
    </el-form-item>
     <el-form-item v-show="ruleForm.booking === false" label=" ">
      <el-select  v-model="ruleForm.makeAppointment" placeholder="请选择" style="width: 240px">
    <el-option value="线上预约">线上预约</el-option>
    <el-option value="线下预约">线下预约</el-option>
  </el-select>
  <el-select v-show="ruleForm.booking === false" v-model="ruleForm.timeType" placeholder="请选择" style="width: 240px">
    <el-option value="时段型">时段型</el-option>
    <el-option value="全体型">全体型</el-option>
  </el-select>
    </el-form-item>
     <el-form-item v-show="ruleForm.booking === false" label="预约确认">
      <el-radio-group v-model="ruleForm.appointment">
      <el-radio :value="true" size="large">不需要，系统自动确认</el-radio>
      <el-radio :value="false" size="large">
        需要，商家在后台确认预订，且超过
        <el-input v-model="ruleForm.minute" style="width: 40px" placeholder="30" />
        小时未处理则自动
         <el-select v-model="ruleForm.howAppointment" placeholder="请选择" style="width: 240px">
    <el-option value="确认预订">确认预订</el-option>
    <el-option value="取消预订">取消预订</el-option>
  </el-select>
      </el-radio>
    </el-radio-group>
    </el-form-item>
     <el-form-item label="其他规则" prop="desc">
       <el-input
    v-model="ruleForm.miscellaneous"
    maxlength="1000"
    style="width: 240px"
    placeholder="Please input"
    show-word-limit
    type="textarea"
  />
    </el-form-item>
    <h2>其他信息</h2>
     <el-form-item label="上架设置" prop="desc">
      <el-radio-group v-model="ruleForm.shelves">
      <el-radio :value="1" size="large">立即上架</el-radio>
      <el-radio :value="2" size="large">暂不上架</el-radio>
      <el-radio :value="3" size="large">定时上架</el-radio>
    </el-radio-group>
    </el-form-item>
    <el-form-item label="下架设置" prop="desc">
      <el-checkbox v-model="ruleForm.takenShelves" label="定时下架" size="large" value="true"/>
    </el-form-item>
    <el-form-item v-show="ruleForm.takenShelves===true" label=" " >
      <el-switch
    v-model="ruleForm.opens"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #909399"
  />
  <el-input v-model="ruleForm.hour" style="width: 80px" :disabled="ruleForm.opens===false" />小时宣告即将停售
    </el-form-item>
    <el-form-item label="领取方式">
      <el-checkbox v-model="ruleForm.howGet" label="到店领取" size="large" value="true"/>
            <el-checkbox  label="邮寄" size="large" value="false" disabled/>
    </el-form-item>
    <el-form-item label="卡券同步">
      <el-checkbox  label="微信卡包" size="large" value="true"/>
      <span>只支持开通卡券服务的认证号</span>
    </el-form-item>
    <el-form-item label="海报标签" prop="desc">
       <el-input v-model="ruleForm.posterLabels" style="width: 240px" placeholder="Please input"     maxlength="300"/>
       <el-button type="primary" size="small" class="no-border same-background">查看标签</el-button>
    </el-form-item>
    <h2>预留信息设置</h2>
    <el-form-item label="手机号码" prop="desc">
      <el-radio-group v-model="ruleForm.filOut">
      <el-radio :value="true" size="large">需填写</el-radio>
      <el-radio :value="false" size="large">不需填写</el-radio>
    </el-radio-group>
    </el-form-item>
    <el-form-item label=" " prop="desc">
      <el-switch
    v-model="ruleForm.sMS"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
    </el-form-item>
    <el-form-item label="预留信息" prop="desc">
      <span>
<el-table :data="texts" border style="width: 400px">
    <el-table-column prop="names" label="信息名称" width="200" />
    <el-table-column  label="操作" width="200" >
      <template #default="scope">
        <el-button
          type="text"
          @click="handleEdit(scope.row)"
        >编辑</el-button>
        <el-button
          type="text"
          class="red"
          @click="handleDelete(scope.row.id)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      </span>
    </el-form-item>
    <el-form-item label=" ">
          <el-button @click="getdialogVisibles">添加字段</el-button>
    </el-form-item>
  <el-form-item label=" ">
          <span>购买商品时让客户输入自定义字段，最多可以设置10条留言</span>
    </el-form-item>
    <h2>分享设置</h2>
    <el-form-item label="分享标题" prop="desc">
      <el-input
    v-model="ruleForm.shareTitle"
    style="width: 240px"
    maxlength="18"
    placeholder="例：商品名称"
    show-word-limit
    type="text"
  />
    </el-form-item>
    <el-form-item label="分享描述" prop="shareDescription">
      <el-input v-model="ruleForm.shareDescription" type="textarea"  maxlength="20"/>
    </el-form-item>
    <el-form-item label="分享图片" prop="desc">
      <el-upload
    class="avatar-uploader"
    action="https://localhost:44392/PostImag"
    :show-file-list="false"
    :on-success="handleAvatarSuccesss"
    :before-upload="beforeAvatarUploads"
  >
    <img v-if="ruleForm.ShareImages" :src="ruleForm.ShareImages" class="avatar" style="width: 80px;height: 80px"/>
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">取消</el-button>
    </el-form-item>
  </el-form>



  <el-dialog
    v-model="dialogVisible"
    title="添加预约信息"
    width="500"

  >
    <el-form :model="infors" label-width="auto" style="max-width: 600px">
    <el-form-item label="信息名称">
      <el-input v-model="infors.names" />
    </el-form-item>
    <el-form-item label="信息类型">
       <el-select v-model="infors.types" placeholder="请选择">
        <el-option label="文本格式" value="文本格式" />
        <el-option label="数字格式" value="数字格式" />
        <el-option label="预设选项" value="预设选项" />
      </el-select>
    </el-form-item>
    <el-form-item label="自定义提示文案">
       <el-input v-model="infors.values" />
    </el-form-item>
    <el-form-item v-show="infors.types==='预设选项'" label="预设选项内容">
       <el-input v-model="infors.availables" />
    </el-form-item>
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handler">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>




  <el-dialog
    v-model="updatedialogVisible"
    title="x修改预约信息"
    width="500"

  >
    <el-form :model="infors" label-width="auto" style="max-width: 600px">
    <el-form-item label="信息名称">
      <el-input v-model="infors.names" />
    </el-form-item>
    <el-form-item label="信息类型">
       <el-select v-model="infors.types" placeholder="请选择">
        <el-option label="文本格式" value="文本格式" />
        <el-option label="数字格式" value="数字格式" />
        <el-option label="预设选项" value="预设选项" />
      </el-select>
    </el-form-item>
    <el-form-item label="自定义提示文案">
       <el-input v-model="infors.values" />
    </el-form-item>
    <el-form-item v-show="infors.types==='预设选项'" label="预设选项内容">
       <el-input v-model="infors.availables" />
    </el-form-item>
  </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updatedialogVisible = false">取消</el-button>
        <el-button type="primary" @click="Updatehandler">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref,onBeforeUnmount,shallowRef, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import type { UploadProps } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css







const dialogVisible=ref(false)
const updatedialogVisible=ref(false)
const haneids=ref({})
const handleEdit=((row:any)=>{
  infors.value.id=row.id
  infors.value.names=row.names
  infors.value.types=row.types
  infors.value.values=row.values
  infors.value.availables=row.availables
  updatedialogVisible.value=true
})

const Updatehandler=()=>{
  ElMessage.success('修改成功')

  texts.value.map(text => {
    if (text.id === infors.value.id) {
      text.names = infors.value.names
      text.types = infors.value.types
      text.values = infors.value.values
      text.availables = infors.value.availables
    }
  })
  updatedialogVisible.value=false

}
const getdialogVisibles=()=>{
  dialogVisible.value=true
}
// 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef()

      // 内容 HTML
      const valueHtml = ref('<p>hello</p>')

      // 模拟 ajax 异步获取内容
      onMounted(() => {
        setTimeout(() => {
          valueHtml.value = ''
        }, 1500)
        console.log(texts.value)
        HandlerFind()
      })
      interface TextItem {
  id: number;
  names: string;
  types: string;
  values: string;
  availables: string;
}
    const handleDelete=(id:number)=>{
      texts.value = texts.value.filter((text:any )=> text.id !== id);
    }
      const toolbarConfig = {}
      const editorConfig = { placeholder: '请输入内容...' }

      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })

      const handleCreated = (editor:any) => {
        editorRef.value = editor // 记录 editor 实例，重要！
      }

const imageUrl = shallowRef('')
const uploadFileList = ref<string[]>([])

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response)
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  ruleForm.productImages= response

  console.log(ruleForm.productImages)
}
const handleExceed = (files: File[], fileList: File[]) => {
  ElMessage.error(`只能上传最多 10 个文件`);
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('请上传JPG格式的图片!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片大小不得超过2MB!')
    return false
  }
  return true
}

const texts = ref<TextItem[]>([

])
const infors=ref<any>({})
const handler=()=>{
  texts.value.push({
    id:1,
    names:infors.value.names,
    types:infors.value.types,
    values:infors.value.values,
    availables:infors.value.availables,
  })
  dialogVisible.value=false
}
interface RuleForm {
    id:string
  name: string
  productImages: string
  productLabels: string
  productDescription: string
  productDetails: string
  salesPrice: string
  categoricalSettings: string
  price: string
  remaining: number
  actual: number
  deductionss: string[]
  deductions:string
  availables:string[]
  available:string
  purchase:number
  gift:boolean
  other:string
  expirationDate:string
  startDate:string
  endDate:string
  status:number
  availableDates:string
  booking:boolean
  makeAppointment:string
  timeType:string
  appointment:boolean
  minute:number
  howAppointment:string
  miscellaneous:string
  shelves:number
  takenShelves:boolean
  opens:boolean
  hour:number
  howGet:boolean
  posterLabels:string
  filOut:boolean
  sMS:boolean
  reserveInformation:string
  shareTitle:string
  shareDescription:string
  ShareImages:string
creationTime:string
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    id:"",
   name: "",
  productImages: "",
  productLabels: "",
  productDescription: "",
  productDetails: "",
  salesPrice: "",
  categoricalSettings: "",
  price: "",
  remaining: 0,
  actual: 0,
  deductionss:[],
  deductions:"",
  availables:[],
  available:"",
  purchase:0,
  gift:false,
  other:"",
  expirationDate:"",
  startDate:"",
  endDate:"",
  status:0,
  availableDates:"",
  booking:false,
  makeAppointment:"",
  timeType:"",
  appointment:false,
  minute:0,
  howAppointment:"",
  miscellaneous:"",
  shelves:1,
  takenShelves:false,
  opens:false,
  hour:0,
  howGet:false,
  posterLabels:"",
  filOut:false,
  sMS:false,
  reserveInformation:"",
shareTitle:"",
shareDescription:"",
ShareImages:"",
creationTime:""
})

const locationOptions = ['Home', 'Company', 'School']




const handleAvatarSuccesss: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
    ruleForm.ShareImages= response
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUploads: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
  ],
  productLabels: [
    {
      required: true,
      message: '请选择商品标签',
      trigger: 'change',
    },
  ],
  productDescription: [
    {
      required: true,
      message: '请输入商品简介',
      trigger: 'blur',
    },
  ],
  productDetails: [
    {
      type: 'date',
      required: true,
      message: '请输入商品简介',
      trigger: 'blur',
    },
  ],
  salesPrice: [
    {
      type: 'date',
      required: true,
      message: '请输入销售价',
      trigger: 'blur',
    },
  ],
  shareTitle: [
    { required: true, message: '请输入分享标题', trigger: 'blur' },
  ],
  shareDescription:[
    { required: true, message: '请输入分享描述', trigger: 'blur' },
  ],
})
const id=localStorage.getItem("productId")||""
const HandlerFind=()=>{
    axios.get("https://localhost:44392/FindProductAsync?id="+id).then(res=>{
      console.log(res.data.data)
        ruleForm.id=id
        ruleForm.name=res.data.data.name
        ruleForm.productImages=res.data.data.productImages
        ruleForm.productLabels=res.data.data.productLabels
        ruleForm.productDescription=res.data.data.productDescription
        ruleForm.productDetails=res.data.data.productDetails
        ruleForm.salesPrice=res.data.data.salesPrice
        ruleForm.categoricalSettings=res.data.data.categoricalSettings
        ruleForm.price=res.data.data.price
        ruleForm.remaining=res.data.data.remaining
        ruleForm.actual=res.data.data.actual
        ruleForm.deductionss=res.data.data.deductions.split(",")
        ruleForm.availables=res.data.data.available.split(",")
        ruleForm.ShareImages=res.data.data.shareImages
        ruleForm.purchase=res.data.data.purchase
        ruleForm.gift=res.data.data.gift
        ruleForm.other=res.data.data.other
        ruleForm.expirationDate=res.data.data.expirationDate
        ruleForm.startDate=res.data.data.startDate
        ruleForm.endDate=res.data.data.endDate
        ruleForm.status=res.data.data.status
        ruleForm.availableDates=res.data.data.availableDates
        ruleForm.booking=res.data.data.booking
        ruleForm.makeAppointment=res.data.data.makeAppointment
        ruleForm.timeType=res.data.data.timeType
        ruleForm.appointment=res.data.data.appointment
        ruleForm.minute=res.data.data.minute
        ruleForm.howAppointment=res.data.data.howAppointment
        ruleForm.miscellaneous=res.data.data.miscellaneous
        ruleForm.shelves=res.data.data.shelves
        ruleForm.takenShelves=res.data.data.takenShelves
        ruleForm.opens=res.data.data.opens
        ruleForm.hour=res.data.data.hour
        ruleForm.howGet=res.data.data.howGet
        ruleForm.posterLabels=res.data.data.posterLabels
        ruleForm.filOut=res.data.data.filOut
        ruleForm.sMS=res.data.data.sMS
        ruleForm.reserveInformation=res.data.data.reserveInformation
        ruleForm.shareTitle=res.data.data.shareTitle
        console.log(res.data.data.reserveInformation)
        ruleForm.shareDescription=res.data.data.shareDescription
        texts.value=JSON.parse(res.data.data.reserveInformation)
        
ruleForm.creationTime=res.data.data.creationTime

        console.log(ruleForm)
    })
}
const submitForm = async (formEl: FormInstance | undefined) => {
  ruleForm.deductions=ruleForm.deductionss.join(",")
      ruleForm.available=ruleForm.availables.join(",")
      ruleForm.reserveInformation=JSON.stringify(texts.value)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
     
      axios.put("https://localhost:44392/UpdateProductAsync",ruleForm).then(res=>{
        if(res.data.isSuc){
          ElMessage.success("修改成功")
        }else{
          ElMessage.error("修改失败")
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>
<style scoped>
.no-border {
  border: none !important;
}
.same-background {
  background-color: inherit; /* 继承页面背景色 */
  color: white; /* 设置文本颜色为白色 */
}
</style>
